<template>
  <view class="pageBg">
    <custom-nav-bar title="首页"></custom-nav-bar>
    <view class="content">
      <wd-row>
        <wd-col :span="8">
          <view class="bg-dark">
            <view class="count">{{ totalparam.total }}</view>
            <view class="text">今日工单</view>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="bg-light">
            <view class="count">{{ totalparam.unCompleteCount }}</view>
            <view class="text">今日待办</view>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="bg-dark">
            <view class="count">{{ totalparam.completeCount }}</view>
            <view class="text">今日结单</view>
          </view>
        </wd-col>
      </wd-row>

      <view class="swiper_contianer">
        <wd-swiper :list="swiperList" autoplay></wd-swiper>
      </view>
      <!-- <wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" prefix="warn-bold" /> -->
      <view class="Grid_container">
        <wd-row>
          <wd-col :span="6">
            <view class="row_item">
              <image :src="morder" @click="clickimg(1)"></image>
              <text class="grid-text">工单</text>
            </view>
          </wd-col>
          <wd-col :span="6">
            <view class="row_item">
              <image :src="marea" @click="clickimg(2)"></image>
              <text class="grid-text">区域</text>
            </view>
          </wd-col>
          <wd-col :span="6">
            <view class="row_item">
              <image :src="msend" @click="clickimg(3)"></image>
              <text class="grid-text">派单</text>
            </view>
          </wd-col>
          <wd-col :span="6">
            <view class="row_item">
              <image :src="mstate" @click="clickimg(4)"></image>
              <text class="grid-text">在线状态</text>
            </view>
          </wd-col>
        </wd-row>
      </view>

      <view class="type_content">
        <view class="left">
          <view class="text">我的待办</view>
          <wd-icon name="fill-arrow-down" size="22px"></wd-icon>
        </view>
        <view class="right">
          <view class="text">打卡</view>
          <wd-switch
            v-model="userstore.onlinestate"
            @change="handelswitchchange"
          />
        </view>
      </view>
      <view class="order_content">
        <custom-indexlist
          v-for="item in orderlist"
          :key="item.id"
          :order="item"
          @complete="handlecomplete"
        ></custom-indexlist>
      </view>
    </view>
    <wd-toast />
    <official-account></official-account>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user/index'
import { ActivePhonesState } from '@/API/user/index'
import { ref, onMounted, computed, reactive } from 'vue'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import {
  type workOrderDto,
  type orderQuery,
  type PageSize,
  type IndexTotalDto,
  Queryparam
} from '@/API/order/types'
import { getextendbydomain } from '@/API/tenants/index'
// import type { tenantextendto, qrcodedto } from '@/API/tenants/types'
import { GetOrder, GetIndexTotal } from '@/API/order/index'
import { onShow, onHide } from '@dcloudio/uni-app'
import { useToast } from '@/uni_modules/wot-design-uni'
import { usePageStateStore } from '@/store/PageSate/index'
import morder from '@/static/image/orderbtn.png'
import marea from '@/static/image/area.png'
import msend from '@/static/image/send.png'
import mstate from '@/static/image/state.png'
const toast = useToast()

const PageStateStore = usePageStateStore()
const userstore = useUserStore()
const swiperList = ref([
  `${import.meta.env.VITE_BASEURL}/images/back1.png`,
  `${import.meta.env.VITE_BASEURL}/images/back2.png`
])
const orderlist = ref<workOrderDto[]>([])
const totalcount = ref(0)
const reachBottomloading = ref(false)
const totalparam = ref<IndexTotalDto>({
  total: 0,
  completeCount: 0,
  unCompleteCount: 0
})
const clickimg = (index: number) => {
  switch (index) {
    case 1:
      uni.switchTab({
        url: '/pages/list/list'
      })
      break
    case 2:
      uni.navigateTo({
        url: '/pages/area/area'
      })
      break
    case 3:
      uni.navigateTo({
        url: '/pages/createorder/createorder'
      })
      break
    case 4:
      uni.navigateTo({
        url: '/pages/onlinestate/onlinestate'
      })
      break
  }
}

const handelswitchchange = async ({ value }: { value: boolean }) => {
  const result = await ActivePhonesState(userstore.phoneid, value)
  if (result.code == '200') {
    toast.success(result.message)
    userstore.onlinestate = value
  } else {
    toast.error('不能打卡,号码验证错误请检查配置号码是否有负责区域')
    userstore.onlinestate = false
  }
}
onShow(async () => {
  await loadtotal()
  //console.log('onShow', 'index', PageStateStore.detialstate)
  await refresh()
  // if (!PageStateStore.detialstate) await refresh()
})
onHide(() => {
  // console.log('onHide', 'index')
  PageStateStore.detialstate = false
})

onMounted(async () => {
  //调试使用
  // const result = await getextendbydomain('zhmc')
  // userstore.tenantId = result.tenantId

  await refresh()
  // console.log(result)
})

const pagesize = reactive<PageSize>({
  pageNum: 1,
  pageSize: 5
})
const calculatedSkipCount = computed(
  () => (pagesize.pageNum - 1) * pagesize.pageSize
)
const loadtotal = async () => {
  const result = await GetIndexTotal(userstore.phoneid)
  totalparam.value = result
}
const refresh = async () => {
  pagesize.pageNum = 1
  const queryparam = ref<orderQuery>({
    PhoneId: userstore.phoneid,
    queryParam: Queryparam.Index,
    skipcount: calculatedSkipCount.value,
    maxresultcount: pagesize.pageSize
  })
  const result = await GetOrder(queryparam.value)
  totalcount.value = result.totalCount
  orderlist.value = result.items
  pagesize.pageNum++
}
const handlecomplete = async () => {
  console.log('handlecomplete')
  await refresh()
}

const loadorderlist = async () => {
  if (calculatedSkipCount.value < totalcount.value) {
    const queryparam = ref<orderQuery>({
      PhoneId: userstore.phoneid,
      queryParam: Queryparam.Index,
      skipcount: calculatedSkipCount.value,
      maxresultcount: pagesize.pageSize
    })
    const result = await GetOrder(queryparam.value)
    totalcount.value = result.totalCount
    orderlist.value = [...orderlist.value, ...result.items]

    pagesize.pageNum++
  }
}
onPullDownRefresh(async () => {
  await refresh()
  await loadtotal()
  uni.stopPullDownRefresh()
})

onReachBottom(async () => {
  if (!reachBottomloading.value) {
    reachBottomloading.value = true

    await loadorderlist()
    reachBottomloading.value = false
  }
})

onLoad(async (option: any) => {
  // const opt = option as qrcodedto
  // console.log('onLoad', opt)
  if (option && typeof option.scene !== 'undefined' && option.scene !== null) {
    const result = await getextendbydomain(option.scene)
    userstore.tenantId = result.tenantId
    // console.log('onLoad', option.scene, result.tenantId)
  }
})
</script>

<style lang="scss" scoped>
.content {
  margin: 30rpx 30rpx 0 30rpx;
  .bg-dark,
  .bg-light {
    border-radius: 4px;
    min-height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.7);
    padding: 5rpx;

    .count {
      color: #333333;
      font-size: 60rpx;
      font-weight: bold;
    }

    .text {
      color: #555555;
      font-size: 22rpx;
    }
  }

  .bg-dark {
    background: #d3dce6;
  }

  .swiper_contianer {
    margin-top: 15rpx;
  }

  .Grid_container {
    margin-top: 30rpx;
    .row_item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    image {
      width: 85rpx;
      height: 85rpx;
      border-radius: 20rpx;
      overflow: hidden;
    }
    .grid-text {
      font-size: 24rpx;
      color: #909399;
      padding: 10rpx 0 20rpx 0rpx;
      /* #ifndef APP-PLUS */
      box-sizing: border-box;
      /* #endif */
    }
  }

  .type_content {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;

    .left {
      display: flex;

      .text {
        font-weight: bold;
      }

      .icon {
        margin-left: 10rpx;
      }
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        margin: 0 10rpx;
        color: #565656;
      }
    }
  }

  .order_content {
    margin: 10rpx 0;
    padding-bottom: 10rpx;
  }
}
</style>
